<template>
  <div class="wrap">
    <div class="box">
      <input type="text" v-model="search">
      <button class="btn" @click="searchHandle">搜索</button>
    </div>

    <ul>
      <router-link 
        tag="li"
        :to="{name:'Player',params:{id:item.id,name:item.name,author:item.artists[0].name,image:encodeURIComponent(item.album.artist.img1v1Url)}}"
        v-for="(item,index) in searchData" 
        :key="index">
        <span class="itemLeft">{{ index+1 }}</span>
        <div>
          <p>{{ item.name }}</p>
          <span>{{item.artists[0].name}}</span>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name:"Search",
  data(){
    return {
      search:"",
      searchData:[]
    }
  },
  mounted(){},
  methods:{
    searchHandle(){
      this.$api.getSearch({
        keywords:this.search
      }).then(res => {
        // console.log(res);
        this.searchData = res.result.songs;
      })
    }
  }
}
</script>

<style lang="less" scoped>
.wrap{
  padding: 10px;
  .box{
    display: flex;
    input{
      flex: 1;
      height: 30px;
      line-height: 30px;
      border: 1px solid black;
      margin-right: 10px;
      padding: 8px;
      box-sizing: border-box;
    }
    .btn{
      width: 60px;
      height: 30px;
      overflow: hidden;
    }
  }

  ul{
    li{
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .itemLeft{
        display: inline-block;
        width: 20px;
        text-align: center;
      }
      div{
        margin-left: 15px;
        p{
          width: 454px;
          height: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-weight: 700;
        }
        span{
          font-weight: 400;
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
}
</style>